<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录 | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/css/blue.css">
    <link rel="stylesheet" href="/css/noty.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/javascripts/html5shiv.min.js"></script>
    <script src="/javascripts/respond.min.js"></script>
    <![endif]-->
    <!-- Google Font -->
    <link rel="stylesheet" href="/css/googlefonts.css">
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7c91a72ef10289066ba5de547f014127";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <!-- The fav icon -->
    <link rel="shortcut icon" href="/images/favicon.ico">
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="javascript:void(0);"><b>后台</b>登录</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg"><%= msg %></p>
        <form id="loginForm" name="loginForm">
            <div class="form-group has-feedback">
                <input type="username" id="username" class="form-control" placeholder="请输入用户名">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" id="password" class="form-control" placeholder="请输入密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="verify" id="verify" maxlength="4" class="form-control" placeholder="请输入验证码" />
                <img src="/verify" id="yzm" />
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="is_remember" id="is_remember" /> 记住我
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" id="login" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>
        <center><a href="http://www.chenxun.org" target="_blank">电影福利</a></center>
    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<script src="/javascripts/noty.min.js" type="text/javascript"></script>
<!-- jQuery 3 -->
<script src="/javascripts/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/md5.js"></script>
<script>
    $(function () {
        $("#yzm").click(function(){
            var url = "/verify?t=" + Math.random();
            this.src = url;
        });

        $("#username").focus();
        function login() {
            var username = $("#username").val();
            var password = $('#password').val();
            var is_remember = $('#is_remember').val();
            var verify = $('#verify').val();
            if (username == "" || username.trim() == "") {
                $(".login-box-msg").text('用户名不能为空');
                new Noty({
                    type: 'error',
                    layout: 'topCenter',
                    text: '用户名不能为空',
                    timeout: '2000'
                }).show();
            } else if (password == "" || password.trim() == "") {
                $(".login-box-msg").text('密码不能为空');
                new Noty({
                    type: 'error',
                    layout: 'topCenter',
                    text: '密码不能为空',
                    timeout: '2000'
                }).show();
            } else if (verify == "" || verify.trim() == "") {
                $(".login-box-msg").text('验证码不能为空');
                new Noty({
                    type: 'error',
                    layout: 'topCenter',
                    text: '验证码不能为空',
                    timeout: '2000'
                }).show();
            } else {
                console.log($("#loginForm").serialize())
                $.ajax({
                    type: "POST",
                    url: "/login",
                    data: {username: username, password: hex_md5(password.trim()), is_remember: is_remember, verify: verify},
                    asyc: false,
                    beforeSend:function(){
                        $(".login-box-msg").html("<img src='/images/loading.gif'>");
                    },
                    error: function (error) {
                        $(".login-box-msg").text('内部错误，请稍后再试');
                        new Noty({
                            type: 'error',
                            layout: 'topCenter',
                            text: '内部错误，请稍后再试',
                            timeout: '2000'
                        }).show();
                    },
                    success: function (result) {
                        if (result.error) {
                            $(".login-box-msg").text(result.msg || '登录失败   ');
                            new Noty({
                                type: 'error',
                                layout: 'topCenter',
                                text: result.msg || '登录失败',
                                timeout: '2000'
                            }).show();
                        } else {
                            window.location.href = "/";
                        }
                    }
                });
            }
        }
        $("#login").click(function () {
            login();
        });
        $(document).keyup(function(event){
            if(event.keyCode ==13){
                $("#login").trigger("click");
            }
        });
    });
</script>
</body>
</html>
